<template>
	<view class="content">
		<view class="box-bg">
			<uni-nav-bar height="65px" color="#fff" backgroundColor="#00aaff" title="使用" />
		</view>


		<uni-section>
			<up-cell-group :customStyle='groupStyle'>
				<up-cell icon="setting-fill" isLink @click="handleUnits" title="申请用车"></up-cell>
			</up-cell-group>
		</uni-section>

		<uni-section>
			<up-cell-group :customStyle='groupStyle'>

				<up-cell icon="integral-fill" isLink @click="handleDriver" title="申请进度"></up-cell>
				<up-cell icon="integral-fill" isLink @click="handleCar" title="车辆定位"></up-cell>
			</up-cell-group>
		</uni-section>

		<uni-section>
			<up-cell-group :customStyle='groupStyle'>
				<up-cell icon="setting-fill" isLink @click="handleUnits" title="用车回执"></up-cell>
				<up-cell icon="integral-fill" isLink @click="handleDriver" title="用车费用"></up-cell>
				<up-cell icon="integral-fill" isLink @click="handleCar" title="个人用车记录"></up-cell>
			</up-cell-group>
		</uni-section>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const bgColor = ref('#00aaff');
	const groupStyle = ref({
		'background-color': '#fff'
	});

	// 跳转到单位
	function handleUnits() {
		uni.navigateTo({
			url: 'units/index'
		})
	}
	//跳转到驾驶员
	function handleDriver() {
		uni.navigateTo({
			url: 'driver/index'
		})
	}
	// 跳转到车辆
	function handleCar() {
		uni.navigateTo({
			url: 'car/index'
		})
	}
	// 跳转到车辆编制
	function handleCar1() {
		uni.navigateTo({
			url: 'establishment/index'
		})
	}
	// 跳转到车辆申购
	function handleCar2() {
		uni.navigateTo({
			url: 'subscribe/index'
		})
	}
	// f跳转到车辆处置
	function handleCar3() {
		uni.navigateTo({
			url: 'handle/index'
		})
	}
</script>

<style lang="scss" scoped>
	.u-slot-value {
		background-color: #FFB44A;
		border-radius: 50%;
		padding: 5px;
		color: $uni-text-color-inverse;
	}
</style>